<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport"
				content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
	<title>Dimples 后台管理系统</title>
	<link rel="icon" th:href="@{/dimples/images/favicon.ico}" type="image/ico">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
				content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!-- 外部样式 -->
	<link th:href="@{/component/layui/css/layui.css}" rel="stylesheet">
	<link th:href="@{/dimples/css/dimples.css}" rel="stylesheet">
	<style>
		#dimples-login {
			background-size: 100% 100%;
			background: #f0f2f5 url("/dimples/images/background.png");
			height: 100%;
			width: 100%;
			position: fixed;
			padding-top: 1px;
			margin-top: -1px;
		}

		#dimples-login .layui-logo {
			user-select: none;
			overflow: hidden;
			position: static;
			font-size: 27px;
			width: 100%;
			padding: 0;
			line-height: 120px;
			height: 120px;
			color: #3491ff;
			font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
			transition: height .8s cubic-bezier(0.075, 0.82, 0.165, 1)
		}

		#dimples-login .layui-logo span {
			font-weight: 600;
			color: rgba(0, 0, 0, .85);
			border-bottom: 1px solid #3491ff
		}

		#dimples-login .layui-logo span b {
			color: #3491ff
		}

		#dimples-login .login-wrap {
			position: relative;
			top: 50%;
			margin-top: -290px;
			height: 540px
		}

		#dimples-login .layui-form {
			overflow: hidden;
			background: #fff;
			padding: 40px 40px 20px;
			border-radius: 0;
			box-shadow: 1px 3px 3px #ccc;
			position: relative
		}

		#dimples-login .layui-form-item {
			position: relative
		}

		#dimples-login .layui-input {
			text-indent: 26px
		}

		#dimples-login .code-img {
			margin-left: 10px;
			cursor: pointer
		}

		#dimples-login .houseimg img {
			display: inline-block;
			margin-top: 5%
		}

		#dimples-login .login-type-tab {
			margin-bottom: 20px;
			overflow: hidden
		}

		#dimples-login .login-type-tab li {
			display: inline-block;
			padding-right: 20px;
			font-size: 16px;
			line-height: 30px;
			color: #bbb;
			cursor: pointer;
			transition: color .5s ease
		}

		#dimples-login .login-type-tab li.active {
			color: #333
		}

		#dimples-login .layui-form-item .label-icon {
			position: absolute;
			top: 0;
			left: 0;
			width: 38px;
			line-height: 38px;
			text-align: center;
			color: #d2d2d2 !important
		}

	</style>
</head>

<body>
<div id="dimples-login" lay-title="登录">
	<div class="login-wrap">
		<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-xs12 layui-col-lg4 layui-col-lg-offset4 dimples-tc">
					<div class="layui-logo"><span><b>DIMPLES</b></span></div>
				</div>
				<!-- 用户登陆 -->
				<div class="layui-col-xs12 layui-col-lg4 layui-col-lg-offset4" id="login-div">
					<div class="layui-form" lay-filter="login-form">
						<div class="layui-anim layui-anim-upbit">
							<ul class="login-type-tab">
								<li class="active">系统登录</li>
							</ul>
							<div class="normal-login-form">
								<div class="layui-form-item">
									<label class="layui-icon label-icon layui-icon-username"></label>
									<label>
										<input type="text" name="username" lay-verify="required"
													 placeholder="用户名" autocomplete="off"
													 class="layui-input">
									</label>
								</div>
								<div class="layui-form-item password-block">
									<label class="layui-icon label-icon layui-icon-password"></label>
									<label>
										<input type="password" name="password" lay-verify="required"
													 placeholder="密码" autocomplete="off"
													 class="layui-input">
									</label>
								</div>
								<div class="layui-form-item">
									<div class="layui-row">
										<div class="layui-col-xs7">
											<label class="layui-icon label-icon layui-icon-vercode"></label>
											<label>
												<input type="text" maxlength="4" name="verifyCode"
															 lay-verify="required"
															 placeholder="验证码" class="layui-input"
															 autocomplete="off">
											</label>
										</div>
										<div class="layui-col-xs5">
											<img class="code-img" id="code-img" alt=""
													 th:src="@{/sys/captcha}"
													 title="点击刷新" src="../static/dimples/images/captcha.png"/>
										</div>
									</div>
								</div>
								<div class="layui-form-item" style="margin-top: -10px;">
									<input type="checkbox" name="rememberMe" title="记住我" checked
												 lay-skin="primary">
								</div>
								<div class="layui-form-item">
									<button class="layui-btn layui-btn-normal layui-btn-fluid"
													lay-submit
													lay-filter="login-submit" id="login">
										<i style="display: none"
											 class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
										立即登录
									</button>
								</div>
							</div>
							<div class="layui-form-item dimples-tr">
								<a id="register-href">注册账号</a>
							</div>
						</div>
					</div>
				</div>

				<!-- 账号注册 -->
				<div class="layui-col-xs12 layui-col-lg4 layui-col-lg-offset4 dimples-hide"
						 id="register-div">
					<div class="layui-form" lay-filter="register-form">
						<div class="layui-anim layui-anim-upbit">
							<ul class="login-type-tab">
								<li class="active">账号注册</li>
							</ul>
							<div class="normal-login-form">
								<div class="layui-form-item">
									<label class="layui-icon label-icon layui-icon-username"></label>
									<label>
										<input type="text" name="username" minlength="2"
													 maxlength="10" lay-verify="range"
													 placeholder="用户名" autocomplete="off"
													 class="layui-input">
									</label>
								</div>
								<div class="layui-form-item password-block">
									<label class="layui-icon label-icon layui-icon-password"></label>
									<label>
										<input type="password" name="password" minlength="6"
													 lay-verify="range"
													 placeholder="密码" autocomplete="off"
													 class="layui-input">
									</label>
								</div>
								<div class="layui-form-item password-block">
									<label class="layui-icon label-icon layui-icon-password"></label>
									<label>
										<input type="password" name="passwordB"
													 lay-verify="required"
													 placeholder="密码确认" autocomplete="off"
													 class="layui-input">
									</label>
								</div>
								<div class="layui-form-item">
									<button class="layui-btn layui-btn-normal layui-btn-fluid"
													lay-submit
													lay-filter="register-submit" id="register">
										<i style="display: none"
											 class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
										立即注册
									</button>
								</div>
							</div>
						</div>
						<div class="layui-form-item dimples-tr">
							<a id="login-href">已有账号？马上登录</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<!-- lay ui -->
<script type="text/javascript" th:src="@{/component/layui/layui.js}"></script>
<script type="text/javascript">
    layui.use(['form', 'layer'], function (form, layer) {
        let $ = layui.jquery,
            $view = $('#dimples-login'),
            type = 'login',
            $loginDiv = $view.find('#login-div'),
            $registerDiv = $view.find('#register-div');

        //提交登录表单
        form.on('submit(login-submit)', function (data) {
            let loading = $(this).find('.layui-icon');
            if (loading.is(":visible")) return;
            loading.show();
            // 将用户名缓存
            let username = $('input[name=username]').val();
            layui.data('currentUser', {
                key: 'username', value: username
            });
            $.post('/sys/login', data.field, function (r) {
                if (r.code === 200) {
                    location.href = '/web/sys/index';
                } else {
                    layer.msg(r.message);
                    loading.hide();
                    initCode();
                }
            });
            return false;
        });

        //提交注册表单
        form.on('submit(register-submit)', function (data) {
            if (data.field.password !== data.field.passwordB) {
                layer.msg('两次密码输入不一致！');
                return;
            }
            let loading = $(this).find('.layui-icon');
            if (loading.is(":visible")) return;
            loading.show();
            $.post('/sys/register', data.field, function (r) {
                if (r.code === 200) {
                    layer.msg('注册成功，请登录');
                    loading.hide();
                    $view.find('#login-href').trigger('click');
                } else {
                    layer.msg(r.message);
                    loading.hide();
                }
            });
            return false;
        });

        function initCode() {
            $view.find('#code-img').attr("src", "/sys/captcha?data=" + Math.random());
        }

        $("#code-img").on("click", function () {
            initCode();
        });

        $view.find('#register-href').on('click', function () {
            resetForm();
            type = 'register';
            $loginDiv.hide();
            $registerDiv.show();
        });

        $view.find('#login-href').on('click', function () {
            resetForm();
            type = 'login';
            $loginDiv.show();
            $registerDiv.hide();
        });

        function resetForm() {
            $registerDiv.find('input[name="username"]').val('')
                .end().find('input[name="password"]').val('')
                .end().find('input[name="passwordB"]').val('');

            $loginDiv.find('input[name="username"]').val('')
                .end().find('input[name="password"]').val('')
                .end().find('input[name="verifyCode"]').val('');
        }

        $(document).on('keydown', function (e) {
            if (e.keyCode === 13) {
                if (type === 'login')
                    $view.find('#login').trigger("click");
                if (type === 'register')
                    $view.find('#register').trigger("click");
            }
        });
    });
</script>
</html>


















